<apes-tabset [apesAnimated]="false" [apesType]="'card'" [ngStyle]="{'overflow':'inherit'}"
             *ngIf="notesIsExists() || processIsExists()" [apesShowPagination]="false">

  <!-- 操作日志 -->
  <ng-container *ngIf="notesIsExists()">
    <apes-tab apesTitle="日志" (apesClick)="showTab('log')" (apesSelect)="onSelect()">
      <apes-panel *ngIf="showTabNow === 'log'">

        <!--评论-->
        <div class="apes-chatter-log-btn">
          <div *ngIf="showCommentLog">
          <textarea apes-input
                    rows="2"
                    [apesAutosize]="{ minRows: 2, maxRows: 2 }"
                    [(ngModel)]="remark"></textarea>
            <button apes-button apesType="primary" (click)="submitCommentLog()">提交</button>
            <button apes-button apesType="primary" (click)="cancelCommentLog()">取消</button>
          </div>
          <div *ngIf="!showCommentLog" (click)="openCommentLog()" class="log-btn">评论</div>
        </div>

        <!--当前节点-->
        <div apes-row *ngIf="processIsExists()">
          <div apes-col [apesSpan]="24" class="apes-oaImg-left-text">
            <!--            <apes-descriptions apesBordered [apesSize]="'small'" [apesColumn]="3">-->
            <!--              <apes-descriptions-item apesTitle="当前节点">{{curTaskName}}</apes-descriptions-item>-->
            <!--              <apes-descriptions-item apesTitle="待办人">{{candidate}}</apes-descriptions-item>-->
            <!--              <apes-descriptions-item apesTitle="节点耗时">{{nodeDuration}}</apes-descriptions-item>-->
            <!--            </apes-descriptions>-->

            <apes-timeline>
              <apes-timeline-item class="apes-timeline-type" [apesType]=true [apesOA]=true>
                <!--              <apes-timeline-item class="apes-timeline-type" [apesDot]="dotTemplate">-->
                <!--                <ng-template #dotTemplate>-->
                <!--                  <i apes-icon apesType="clock-circle-o"></i>-->
                <!--                </ng-template>-->
                <div class="apes-timeline-main">
                  <!-- 左边部分 -->
                  <div class="apes-timeline-main-top">
                    <!-- 操作事件 -->
                    <div class="apes-timeline-operate"
                         [ngClass]="{'orange' : curTaskName != '结单' && curTaskName != '完成'}">
                      <i apes-icon apesType="calendar"></i>
                      <span *ngIf="curTaskName != '结单' && curTaskName != '完成'"> 待处理：</span>
                      {{curTaskName}}
                    </div>
                    <!-- 操作人员 -->
                    <div *ngIf="candidate != ''" class="apes-timeline-name" style="color: #000b16">
                      <span>
                        <i apes-icon apesType="user"></i>
                        {{candidate}}
                      </span>
                    </div>
                    <!-- 操作时间 -->
                    <div *ngIf="nodeDuration != ''" class="apes-timeline-date" style="color: #000b16">
                      <i apes-icon apesType="clock-circle"></i>
                      {{getTime(nodeDuration)}}
                    </div>
                  </div>
                </div>
              </apes-timeline-item>
            </apes-timeline>

          </div>
        </div>

        <!--时间轴日志-->
        <apes-timeline>
          <apes-timeline-item *ngFor="let tmp of initNotes()"
                              [apesType]=true
                              [apesOA]="tmp.oaFlag"
                              [apesTodo]="tmp.todoFlag"
                              class="apes-timeline-type">


            <div class="apes-timeline-main">
              <!-- 左边部分 -->
              <div class="apes-timeline-main-top">
                <!-- 操作事件 -->
                <div class="apes-timeline-operate"
                     [ngClass]="{'orange' : tmp.todoFlag}">
                  <!--<i class="anticon anticon-calendar"></i>-->
                  <i apes-icon apesType="calendar"></i>
                  <ng-container *ngIf="tmp.todoFlag">
                    待处理：
                  </ng-container>
                  {{tmp.operate}}
                </div>
                <!-- 操作人员 -->
                <div class="apes-timeline-name">
                  <!--<i class="anticon anticon-user"></i>-->
                  <ng-container *ngIf="!tmp.todoFlag">
                  <span>
                    <i apes-icon apesType="user"></i>
                    {{tmp.operator.name}}
                  </span>
                  </ng-container>
                  <ng-container *ngIf="tmp.todoFlag">
                    <span style="color: #000b16">
                    {{tmp.operator}}
                    </span>
                  </ng-container>

                  <span *ngIf="tmp.workPostName != undefined">
                    ({{tmp.workPostName}})
                  </span>
                  <!-- OA -->
                  <!--<span class="apes-timeline-icon"-->
                  <!--*ngIf="tmp.oaFlag === true">-->
                  <!--<i class="anticon anticon-team"></i>-->
                  <!--&lt;!&ndash;OA&ndash;&gt;-->
                  <!--</span>-->
                </div>
                <!-- 操作时间 -->
                <div class="apes-timeline-date">
                  <!--<i class="anticon anticon-clock-circle-o"></i>-->
                  <i apes-icon apesType="clock-circle"></i>
                  {{getDateTime(tmp.businessDate)}}
                </div>
              </div>
              <!-- 底部部分 -->
              <div class="apes-timeline-main-bottom">
                <!-- 操作备注 -->
                <textarea apes-input
                          class="apes-timeline-remark"
                          rows="2"
                          readonly="ture"
                          *ngIf="tmp.remark">{{tmp.remark}}</textarea>
                <ng-container *ngIf="tmp.audit">
                  <div *ngFor="let editor of initAudit(tmp.audit)">
                    <span>· {{editor.f}} : </span>
                    <ng-container *ngIf="editor.o && editor.n">
                      <span>{{editor.o}}</span>
                      <span> → </span>
                      <span>{{editor.n}}</span>
                    </ng-container>
                    <ng-container *ngIf="editor.o && !editor.n">
                      <span>{{editor.o}}</span>
                      <span> → </span>
                      <span>“ ”</span>
                    </ng-container>
                    <ng-container *ngIf="!editor.o && editor.n">
                      <span>“ ”</span>
                      <span> → </span>
                      <span>{{editor.n}}</span>
                    </ng-container>

                  </div>
                </ng-container>
              </div>
            </div>
          </apes-timeline-item>
        </apes-timeline>
        <div class="apes-chatter-log-more">
          <button *ngIf="isShowMore"
                  apes-button (click)="checkLogMore()">加载更多
          </button>
        </div>
      </apes-panel>
    </apes-tab>
  </ng-container>

  <!-- 留言板（暂时未用） -->
  <ng-container *ngIf="false">
    <apes-tab apesTitle="留言板" (apesClick)="showTab('msg')">
      <apes-panel *ngIf="showTabNow === 'msg'">
        <textarea apes-input
                  placeholder="Autosize height with minimum and maximum number of lines"
                  rows="6"
                  [apesAutosize]="{ minRows: 6, maxRows: 6 }"></textarea>
      </apes-panel>
    </apes-tab>
  </ng-container>

  <!-- 任务流程（暂时未用） -->
  <ng-container *ngIf="false">
    <apes-tab apesTitle="业务流程" (apesClick)="showTab('mission')">
      <apes-panel *ngIf="showTabNow === 'mission'">
        <apes-timeline>
          <apes-timeline-item *ngFor="let tmp of process"
                              [apesType]=true
                              class="apes-timeline-type">


            <div class="apes-timeline-main" [ngClass]="{'finished': tmp.state == 'two'}">
              <!-- 左边部分 -->
              <div class="apes-timeline-main-top" (click)="checkMissionMore(tmp)">
                <!-- 操作事件 -->
                <div class="apes-timeline-operate">
                  <!--<i class="anticon anticon-calendar"></i>-->
                  <i apes-icon apesType="calendar"></i>
                  {{tmp.step}}
                </div>
                <!-- 操作人员 -->
                <div class="apes-timeline-name">
                  <!--<i class="anticon anticon-user"></i>-->
                  <i apes-icon apesType="bars"></i>
                  {{tmp.describe}}
                  <!-- OA -->
                  <!--<span class="apes-timeline-icon"-->
                  <!--*ngIf="tmp.oaFlag === true">-->
                  <!--<i class="anticon anticon-team"></i>-->
                  <!--&lt;!&ndash;OA&ndash;&gt;-->
                  <!--</span>-->
                </div>
                <!-- 操作时间 -->
                <!--<div class="apes-timeline-date">-->
                <!--&lt;!&ndash;<i class="anticon anticon-clock-circle-o"></i>&ndash;&gt;-->
                <!--<i apes-icon apesType="clock-circle"></i>-->
                <!--{{getDateTime(tmp.businessDate)}}-->
                <!--</div>-->
              </div>
              <!-- 底部部分 -->
              <div class="apes-timeline-main-bottom" *ngIf="tmp.show">
                <div *ngFor="let secondary of tmp.secondary">
                  <div class="apes-timeline-bottom-div">
                    {{secondary.type}}：
                    <span class="apes-timeline-bottom-span"
                          (click)="clickLink(secondary.link)">{{secondary.number}}</span>
                    <span>执行时间：{{secondary.time}}</span>
                  </div>

                </div>
              </div>
            </div>
          </apes-timeline-item>
        </apes-timeline>

      </apes-panel>
    </apes-tab>
  </ng-container>

  <!-- OA流程图 -->
  <ng-container *ngIf="processIsExists()">
    <apes-tab apesTitle="流程图" (apesClick)="showTab('flow')" (apesSelect)="onSelect()">
      <apes-panel *ngIf="showTabNow === 'flow'" class="apes-oaImg">
        <div apes-row [apesJustify]="'space-around'" [apesAlign]="'middle'" class="apes-oaImg-left">
          <!--          <div apes-col [apesSpan]="6" class="apes-oaImg-left-text">-->
          <!--            <apes-descriptions apesBordered [apesSize]="'small'" [apesColumn]="1">-->
          <!--              <apes-descriptions-item apesTitle="待办人">{{candidate}}</apes-descriptions-item>-->
          <!--              <apes-descriptions-item apesTitle="当前节点">{{curTaskName}}</apes-descriptions-item>-->
          <!--              <apes-descriptions-item apesTitle="节点耗时">{{nodeDuration}}</apes-descriptions-item>-->
          <!--            </apes-descriptions>-->
          <!--          </div>-->
          <div apes-col [apesSpan]="24">
            <div *ngIf="!_src" class="apes-chatter-loading">
              <div class="k-line2 k-line12-1"></div>
              <div class="k-line2 k-line12-2"></div>
              <div class="k-line2 k-line12-3"></div>
              <div class="k-line2 k-line12-4"></div>
              <div class="k-line2 k-line12-5"></div>
              <div class="k-line2 k-line12-6"></div>
              <div class="k-line2 k-line12-7"></div>
              <div class="k-line2 k-line12-8"></div>
            </div>
            <img *ngIf="_src" [src]="_src" alt="">
          </div>
        </div>
      </apes-panel>
    </apes-tab>
  </ng-container>
</apes-tabset>
